// import { lighten } from '@/utils/color';

/** bimface标签 */
export function useLabel() {
  function addCustomItemLabel(
    model,
    drawable,
    id: string,
    info: {
      configData?: { text: string; tooltip: string; color: string };
      DOMElement?: HTMLElement;
    },
  ) {
    console.log(id, info, 'label');
    const defaultConfig = {
      text: '',
      tooltip: '',
      color: '#000',
    };

    const boundingBox = model.getBoundingBoxById(id);
    console.log(boundingBox, 'boundingBox');

    const { max, min } = boundingBox;
    const worldPosition = {
      x: (max.x + min.x) / 2,
      y: (max.y + min.y) / 2,
      z: (max.z + min.z) / 2,
    };
    const config = new window.Glodon.Bimface.Plugins.Drawable.CustomItemConfig();
    config.worldPosition = worldPosition;
    config.opacity = 0.9;
    const content = info.DOMElement || createCustomLabel(info.configData || defaultConfig);
    config.content = content;
    config.objectId = id;
    const label = new window.Glodon.Bimface.Plugins.Drawable.CustomItem(config);
    drawable.addItem(label);
  }

  function createCustomLabel({ color, text, tooltip }) {
    // 标签容器
    const content = document.createElement('div');
    // 提示框
    const popover = document.createElement('div');
    const popoverContent = document.createElement('div');
    const popoverArrow = document.createElement('div');
    content.innerHTML = `<div class="text-white">${text}</div>`;
    content.style.minHeight = '70px';
    content.style.minWidth = '70px';
    content.style.height = 'auto';
    content.style.padding = '5px';
    content.style.backgroundColor = color;
    content.style.borderRadius = '5px';
    content.style.textAlign = 'center';
    content.style.position = 'relative';
    content.style.display = 'flex';
    content.style.justifyContent = 'center';
    content.style.alignItems = 'center';
    content.style.border = '1px solid #000';
    popoverArrow.style.width = '0';
    popoverArrow.style.border = '6px solid transparent';
    popoverArrow.style.borderColor = color + ' transparent transparent';
    popoverContent.style.padding = '5px';
    popoverContent.style.minWidth = '150px';
    popoverContent.style.height = 'auto';
    popoverContent.style.background = color;
    popoverContent.style.color = '#000';
    // popoverContent.innerHTML = `<div style="padding: 10px; background: ${lighten(
    //   color,
    //   80,
    // )}">${tooltip}</div>`;
    popover.style.display = 'none';
    popoverContent.style.borderRadius = '3px';
    popover.style.position = 'absolute';
    popover.appendChild(popoverContent);
    popover.appendChild(popoverArrow);
    content.addEventListener('mouseenter', () => {
      popover.style.display = 'flex';
      popover.style.flexDirection = 'column';
      popover.style.alignItems = 'center';
      popover.style.top = `-${popoverContent.clientHeight + 6}px`;
    });
    content.addEventListener('mouseleave', () => {
      popover.style.display = 'none';
    });
    content.appendChild(popover);
    return content;
  }

  function clearLabel(drawable) {
    console.log(drawable, 'drawable');
    if (!drawable) return;
    drawable.clear();
  }

  return {
    addCustomItemLabel,
    clearLabel,
  };
}
